<script setup lang="ts">
// #ifdef MP
import { onAddToFavorites, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
import { wxCollect, wxShare } from '@/libs/share'

onShareAppMessage(wxShare(true))
onShareTimeline(wxShare(false))
onAddToFavorites(wxCollect())
// #endif

import { imagePath } from '@/libs/file-utils'
import { list, updateVIPRule } from './data'

const img_card = imagePath('user/vip-rule/card.png')

updateVIPRule()
</script>

<template>
  <PageWrapper
    name="user-vip-rule"
    :pageStyle="{ backgroundColor: '#FFB190' }"
  >
    <div class="mask"></div>
    <div
      class="card"
      :style="{ backgroundImage: img_card }"
    >
      <div class="name">会员成长规则</div>
      <div class="box">
        <div
          v-for="(item, index) in list"
          :key="index"
          class="item"
        >
          <div
            class="icon"
            :style="{ backgroundImage: item.icon }"
          ></div>
          <div class="title">{{ item.title }}</div>
          <div class="desc">{{ item.description }}</div>
        </div>
      </div>
    </div>
  </PageWrapper>
</template>

<style lang="less" scoped>
.mask {
  position: absolute;
  left: 0;
  bottom: 0;

  width: 100%;
  height: 50%;

  background-color: #FFCB8F;
  z-index: -1;
}

.card {
  position: relative;
  width: 694rpx;
  height: 1062rpx;

  margin: 26rpx auto;

  .name {
    position: absolute;
    top: 266rpx;
    left: 0;

    width: 100%;

    color: #532429;
    text-align: center;
    font-size: 64rpx;
    line-height: 104rpx;
  }

  .box {
    position: absolute;
    top: 392rpx;
    left: 50%;
    transform: translateX(-50%);

    width: 600rpx;

    box-sizing: border-box;
    padding: 60rpx 0;

    border-radius: 48rpx;
    background-color: #FFF9EA;

    .item {
      width: 100%;

      margin: 12rpx 0;

      box-sizing: border-box;
      padding: 0 30rpx;

      display: flex;

      .icon {
        width: 48rpx;
        height: 48rpx;
      }

      .title {
        margin-left: 6rpx;

        color: #3F0C13;
        font-size: 40rpx;
        line-height: 48rpx;
      }

      .desc {
        flex: 1;
        margin-left: 32rpx;

        color: #3F0C13;
        font-size: 32rpx;
        line-height: 48rpx;
      }
    }
  }
}
</style>